<!--
 * @Author: 王灿
 * @Date: 2019-11-24 13:19:52
 * @LastEditTime: 2020-03-17 11:19:40
 * @Description: 优惠券模板
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-coupon\index.vue
 -->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow" />
    <!-- fun btn -->
    <div class="public-search">
      <el-form>
        <el-select
          v-model="status"
          clearable
          placeholder="选择状态"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          v-model="realName"
          placeholder="用户名"
          clearable
        ></el-input>
        <el-input
          v-model="mobile"
          placeholder="手机号"
          clearable
        ></el-input>
      </el-form>
    </div>
    <!-- 优惠券模板列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 商品名称 -->
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <!-- 商品优惠卷价格 -->
        <el-table-column prop="amount" label="商品优惠卷价格"></el-table-column>
        <!-- 商品优惠卷状态 -->
        <el-table-column prop="remark" label="优惠卷备注">
          <template slot-scope="scope">
            <span>{{ scope.row.remark || '--'}}</span>
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="createAt" label="创建时间"></el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onCheckDetails(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="onRelease(scope.row.id)">发布</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 新增/详情 -->
    <el-dialog title="优惠卷模板" :visible.sync="isShow" :close-on-click-modal="false" width="600px">
      <template-operate
        :row="row"
        :isShow="isShow"
        @addTableRow="onTableRow"
        @onChangeRefresh="onChangeRefresh"
      />
    </el-dialog>

    <!-- 发布 -->
    <el-dialog title="优惠卷发布" :visible.sync="isRelease" :close-on-click-modal="false" width="600px">
      <coupon-release
        :modularId="modularId"
        @onChangeRefresh="onChangeRefresh"
        @addTableRow="onTableRow"
      />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import TemplateOperate from './template-operate/index'
import CouponRelease from './../coupon-release/index'
import { getModularList } from '@/api/commodity.js'
export default {
  name: 'CouponTemplate',
  components: { JqTitle, JqPage, TemplateOperate, CouponRelease },
  data() {
    return {
      title: { label: '优惠券模板管理', flag: true, searchFlag: false },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      productList: [],
      userList: [],
      row: {},
      isRefresh: false,
      isShow: false,
      modularId: '',
      isRelease: false,
      status: '',
      statusOptions: [
        {label: '全部', value: ''},
        {label: '待使用', value: 0},
        {label: '已使用', value: 1},
        {label: '已过期', value: 2}
      ],
      realName: '',
      mobile: ''
    }
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetModularList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetModularList()
    },
    // 监听刷新父组件页面标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetModularList()
      }
    },
    // 监听弹窗关闭清空数据
    isShow() {
      if (!this.isShow) {
        this.row = {}
      }
    },
    // 搜索
    mobile() {
      this.pageNum = 1
      this.onGetModularList()
    },
    realName() {
      this.pageNum = 1
      this.onGetModularList()
    },
    status() {
      this.pageNum = 1
      this.onGetModularList()
    }
  },
  created() {
    this.onGetModularList()
  },
  methods: {
    // 新增
    onTableRow(data) {
      this.isShow = data.isShow
      this.isRelease = false
      this.row = {}
      this.isRefresh = false
    },
    // 编辑
    onCheckDetails(row) {
      this.isShow = true
      this.row = row
      this.isRefresh = false
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 获取商品优惠卷模板列表
    onGetModularList() {
      getModularList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.status,
        realName: this.realName,
        userId: this.mobile
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 新增/编辑/发布 成功刷新页面
    onChangeRefresh() {
      this.isShow = false
      this.isRelease = false
      this.isRefresh = true
    },
    // 发布
    onRelease(modularId) {
      this.modularId = modularId
      this.isRelease = true
      this.isRefresh = false
    },
  }
}
</script>

<style lang="scss">
.public {
  .public-table__status {
    &.over {
      background: #e6a23c;
    }
    &.doing {
      background: #96b327;
    }
  }
}
</style>
